<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <div class="data-box-left" v-if="dataObj">
        <div class="user-title-box" v-if="$fieldShowFunc('15-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border v-if="dataObj">
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('dk_xmmc')">
            <div slot="label" class="justify_8">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('dk_xmbh')">
            <div slot="label" class="justify_8">项目编号</div>
            <span class="click-color" @click="hrefProjectFunc">{{ dataObj.project_number }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('dk_xmpp')">
            <div slot="label" class="justify_8">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('dk_xmlx')">
            <div slot="label" class="justify_8">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 4, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('15-dkrz')">对客日志</div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="本次沟通内容" v-if="$fieldShowFunc('dk_bcgtnr')">
            <div slot="label" class="justify_8">本次沟通内容</div>
            {{ dataObj.content || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="跟进方式" v-if="$fieldShowFunc('dk_gjfs')">
            <div slot="label" class="justify_8">跟进方式</div>
            <span v-if="dataObj.follow_up_method == 1">电话</span>
            <span v-if="dataObj.follow_up_method == 2">微信</span>
            <span v-if="dataObj.follow_up_method == 3">企微</span>
            <span v-if="dataObj.follow_up_method == 4">邮件</span>
            <span v-if="dataObj.follow_up_method == 5">上门拜访</span>
          </el-descriptions-item>
          <el-descriptions-item label="沟通阶段" v-if="$fieldShowFunc('dk_bcgtjd')">
            <div slot="label" class="justify_8">沟通阶段</div>
            <span v-if="dataObj.communication_stage == 1">勘场</span>
            <span v-if="dataObj.communication_stage == 2">报价</span>
            <span v-if="dataObj.communication_stage == 3">洽谈</span>
            <span v-if="dataObj.communication_stage == 4">签约</span>
            <span v-if="dataObj.communication_stage == 5">结算</span>
            <span v-if="dataObj.communication_stage == 6">售后</span>
          </el-descriptions-item>
          <el-descriptions-item label="意向签约金额" v-if="$fieldShowFunc('dk_yxqyje')">
            <div slot="label" class="justify_8">意向签约金额</div>
            {{ dataObj.intended_signing_amount ? dataObj.intended_signing_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="下次沟通时间" v-if="$fieldShowFunc('dk_xcgtsj')">
            <div slot="label" class="justify_8">下次沟通时间</div>
            {{ dataObj.next_communication_time || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="是否需要再次沟通" v-if="$fieldShowFunc('dk_sfxyzcgt')">
            <div slot="label" class="justify_8">是否需要再次沟通</div>
            {{ dataObj.is_communicate_again == 1 ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="日志附件" v-if="$fieldShowFunc('dk_rzwj')">
            <div slot="label" class="justify_8">日志附件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.customer_log_files.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.customer_log_files" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.customer_log_files.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建人" v-if="$fieldShowFunc('dk_cjr')">
            <div slot="label" class="justify_8">创建人</div>
            {{ dataObj.handlers_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" v-if="$fieldShowFunc('dk_cjsj')">
            <div slot="label" class="justify_8">创建时间</div>
            {{ dataObj.created_at || '--' }}
          </el-descriptions-item>

          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 4, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import saleApi from "@/api/saleApi";
import projectMsg from "@/components/ProjectMsg";
export default {
  name: 'dkDetail',
  components: {
    projectMsg,
  },
  data() {
    return {
      dataObj: ''
    };
  },
  computed: {

  },
  mounted() {
    this.saleCustomerLogDetails();
  },
  methods: {
    saleCustomerLogDetails() {
      if (!this.$route.query.id) return;
      saleApi.saleCustomerLogDetails({
        id: this.$route.query.id
      }).then(res => {
        console.log(res, "日志详情")
        if (res.code == 200) {
          this.dataObj = res.data;
        }
      })
    },
    // 跳项目详情
    hrefProjectFunc() {
      this.$router.push({ path: '/projectDetailNew', query: { id: this.dataObj.project_id } })
    }
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
@import './index.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>